<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 组织架构的内容  -头部 -->
      <el-card class="tree-card">
        <!-- 放置结构内容 -->
        <TreeTools
          @addDepts="addDepts"
          :treeNode="company"
          :is-root="true"
        ></TreeTools>
        <!-- 放置一个el-tree -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <!-- 传入内容  插槽内容 插槽内容会循环多次  有多少节点就循环多少次-->
          <!-- 作用域插槽  slot-scope="{node,data}" 接收传递给插槽的数据  data表示每个节点的数据对象-->
          <TreeTools
            @editDepts="editDepts"
            @addDepts="addDepts"
            @delDepts="getDepartments"
            slot-scope="{ data }"
            :treeNode="data"
          ></TreeTools>
        </el-tree>
      </el-card>
    </div>
    <!-- 放置新增弹层组件 -->
    <!-- getDepartments重新渲染页面结构的方法 -->
    <AddDept
      ref="addDept"
      @addChildDepts="getDepartments"
      :showDialog.sync="showDialog"
      :treeNode="node"
    ></AddDept>
  </div>
</template>

<script>
import TreeTools from "./components/tree-tools.vue";
import AddDept from "./components/add-dept.vue";
import { getDepartments } from "@/api/departments";
import { tranListToTreeData } from "@/utils/index";
export default {
  components: {
    TreeTools,
    AddDept,
  },
  data() {
    return {
      showDialog: false, //默认不显示弹层
      node: null, //记录当前点击的node节点
      company: { name: "权限管理科技股份有限公司", manager: "负责人" }, //就是头部的数据结构
      departs: [
        {
          name: "总裁办",
          manager: "曹丕",
          children: [{ name: "董事会", manager: "曹操" }],
        },
        { name: "行政部", manager: "刘备" },
        { name: "人事部", manager: "孙权" },
      ],
      defaultProps: {
        children: "children", //从这个属性显示内容
        label: "name", //从这个属性去找子节点
      },
    };
  },
  created() {
    this.getDepartments(); //调用自身的方法
  },
  methods: {
    //重新加载渲染组织架构的方法
    async getDepartments() {
      const result = await getDepartments();
      console.log(result);
      this.company = { name: result.companyName, manager: "负责人", id: "" }; //解构头部数据并赋值到页面
      this.departs = tranListToTreeData(result.depts, ""); //需要将其转化成树形结构
    },
    //监听tree-tools中触发的点击添加子部门的事件
    //node是我们当前点击的部门
    addDepts(node) {
      this.showDialog = true; //显示弹层
      this.node = node;
    },
    //编辑部门的方法
    editDepts(node) {
      this.showDialog = true; //显示弹层
      this.node = node;
      //应该在这里调用获取部门详情的方法,但是必须要在子组件add-dept.vue里面调取方法进行显示，而不是父组件
      // console.log(this.$refs.addDept);
      this.$refs.addDept.getDepartDetail(node.id); //调用子组件中封装好的获取部门详情的方法
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
